<template>
  <div>
    <el-form
      :disabled="disableElement"
      :model="cityTelecomApprovalFormDatas"
      :rules="rules"
      label-width="150px"
      ref="cityTelecomApprovalForm"
      style="width: 70%; margin-left: 15%"
    >
      <el-form-item label="运营商平台" prop="subOperatorPlatForm">
        <el-input
          v-model="cityTelecomApprovalFormDatas.subOperatorPlatForm"
          readonly
        />
      </el-form-item>
      <el-form-item label="IP池" prop="ipPool">
        <el-select
          style="width: 100%"
          placeholder="请选择IP池"
          v-model="cityTelecomApprovalFormDatas.ipPoolDisplay"
          @change="ipPoolSelected"
        >
          <el-option
            v-for="item in cityTelecomApprovalFormDatas.ipPools"
            :key="item.id"
            :label="`${item.ipPool}   (${item.operatorName}  ${
              item.apnTypeName
            }: ${item.apnName}   IP容量:${Math.trunc(
              item.ipCapacity
            )}   IP余量:${Math.trunc(item.ipSurplus)})`"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="APN类型" prop="APNTypes">
        <el-input v-model="cityTelecomApprovalFormDatas.APNTypes" readonly />
      </el-form-item>
      <el-form-item label="APN名称" prop="APNNames">
        <el-input v-model="cityTelecomApprovalFormDatas.APNNames" readonly />
      </el-form-item>
      <el-form-item v-if="isStaticApn" label="已分配IP" prop="CityTelecomApprovalAssignedIP">
        <div style="display: flex">
          <el-input
            readonly
            v-model="cityTelecomApprovalFormDatas.CityTelecomApprovalAssignedIP"
          />
          <el-button
            style="white-space: nowrap; color: #6a71e6"
            @click="assignIP"
            v-if='showAssignIp'
            >分配IP</el-button
          >
        </div>
      </el-form-item>
      <el-form-item label="采购方式" prop="purchaseType">
        <el-radio-group
          v-model="cityTelecomApprovalFormDatas.purchaseType"
          @change="cityTelecomPurchaseTypeSelected"
        >
          <el-radio :label="0">服务商采购</el-radio>
          <el-radio :label="1">自行采购</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="指定采购人员" prop="purchasingPersonnel">
        <el-select
          style="width: 100%"
          v-model="cityTelecomApprovalFormDatas.purchasingPersonnel"
          placeholder="请选择采购人员"
        >
          <el-option
            v-for="purchasingPersonnel in purchasingPersonnelList"
            :key="purchasingPersonnel.userName"
            :label="
              purchasingPersonnel.fullName + '/' + purchasingPersonnel.realName
            "
            :value="purchasingPersonnel.userId"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="审批意见"
        prop="CityTelecomApprovalComment"
        :required="isAgree"
      >
        <el-input
          type="textarea"
          v-model="cityTelecomApprovalFormDatas.CityTelecomApprovalComment"
        />
      </el-form-item>
      <el-form-item
        label="常用意见"
        v-if="showCommonComments"
        prop="cityTeleCommonComments"
      >
        <!--        <el-select-->
        <!--          style="width: 100%"-->
        <!--          v-model="cityTelecomApprovalFormDatas.cityTeleCommonComments"-->
        <!--          placeholder="请选择常用意见"-->
        <!--          @change="cityTeleCommonCommentsSelected"-->
        <!--        >-->
        <!--          <el-option-->
        <!--            v-for="dict in cityGeneralAdviceList"-->
        <!--            :key="dict.dictValue"-->
        <!--            :label="dict.dictLabel"-->
        <!--            :value="dict.dictLabel"-->
        <!--          ></el-option>-->
        <!--        </el-select>-->
        <el-tag
          style="margin-left: 5px"
          v-for="tag in cityGeneralAdviceList"
          :key="tag.dictLabel"
          @click="cityTeleCommonCommentsSelected"
        >
          {{ tag.dictLabel }}
        </el-tag>
      </el-form-item>
      <el-form-item label="审批结果" prop="CityTelecomApprovalResult">
        <el-radio-group
          v-model="cityTelecomApprovalFormDatas.CityTelecomApprovalResult"
          @change="cityTelecomApprovalResultSet"
        >
          <el-radio :label="1">同意</el-radio>
          <el-radio :label="2">不同意</el-radio>
        </el-radio-group>
      </el-form-item>
      <div
        v-if="showFormBtn"
        style="width: 30%;margin-left: 35%;display: flex;justify-content: space-between;
        "
      >
        <el-button type="primary" size="mini" @click="submitForm"
          >提交</el-button
        >
        <el-button size="mini" @click="resetForm">重置</el-button>
      </div>
    </el-form>
  </div>
</template>
<script>
import {
  assignIP,
  listPoolByOrgName,
} from "../../../api/system/resource/ipPool";
import { getUser } from "../../../api/system/user";
import { getPurchasingPersonnelList } from "../../../api/iot/flowable/custom";
import { getDicts } from "../../../api/system/dict/data";

export default {
  props: [
    "cityTelecomApprovalFormData",
    "showFormBtn",
    "disableElement",
    "showCommonComments",
    "showAssignIp",
  ],
  data() {
    const notAgree = (rule, value, callback) => {
      if (this.isAgree && value == "") {
        callback(new Error("审批意见不能为空"));
      } else {
        callback();
      }
      /* if (this.registerForm.password !== value) {
        callback(new Error("两次输入的密码不一致"));
      } else {
        callback();
      } */
    };
    return {
      ipAddressListKey:"",
      cityTelecomApprovalFormDatas: this.cityTelecomApprovalFormData,
      isAgree: false,
      isStaticApn:true,
      ipPools: [],
      purchasingPersonnelList: [],
      cityGeneralAdviceList: [],
      rules: {
        ipPool: [
          {
            required: true,
            message: "IP池不能为空",
            trigger: "change",
          },
        ],
        APNNames: [
          {
            required: true,
            message: "APN名称不能为空",
            trigger: "change",
          },
        ],
        CityTelecomApprovalAssignedIP: [
          {
            required: true,
            message: "已分配IP不能为空",
            trigger: "change",
          },
        ],
        purchaseType: [
          {
            required: true,
            message: "采购方式不能为空",
            trigger: "change",
          },
        ],
        purchasingPersonnel: [
          {
            required: true,
            message: "指定采购人员不能为空",
            trigger: "change",
          },
        ],
        CityTelecomApprovalResult: [
          {
            required: true,
            message: "审批结果不能为空",
            trigger: "change",
          },
        ],
        CityTelecomApprovalComment: [
          {
            validator: notAgree,
            trigger: "change",
          },
        ],
      },
    };
  },
  watch: {
    cityTelecomApprovalFormData(val) {
      this.cityTelecomApprovalFormDatas = val;
    },
  },
  created() {
    getDicts("cityGeneralAdvice").then((res) => {
      this.cityGeneralAdviceList = res.data;
    });
    if (this.cityTelecomApprovalFormDatas.CityTelecomApprovalResult == 2) {
      this.isAgree = true;
    } else {
      this.isAgree = false;
    }
    //todo
    /*     if (
      this.cityTelecomApprovalFormData.purchaseType != null &&
      this.cityTelecomApprovalFormData.purchaseType != ""
    ) { */
      getPurchasingPersonnelList(15,this.cityTelecomApprovalFormData.purchaseType).then((res) => {
        this.purchasingPersonnelList = res.data;
        console.log('this.purchasingPersonnelList6666',this.purchasingPersonnelList)
        if (!(this.purchasingPersonnelList.length > 0)) {
          getUser(this.cityTelecomApprovalFormDatas.purchasingPersonnel).then(
            (res) => {
              this.purchasingPersonnelList.push({
                userId: res.data.userId,
                realName: res.data.realName,
                fullName: res.data.fullName,
              });
            }
          );
        }
      });
    
  },
  //},
  methods: {
    /** 清空表单 */
    resetForm() {
      //请空数据
      console.log(
        "this.cityTelecomApprovalFormDatas",
        this.cityTelecomApprovalFormDatas
      );
      this.cityTelecomApprovalFormDatas = {
        subOperatorPlatForm:
          this.cityTelecomApprovalFormDatas.subOperatorPlatForm,
        ipPool: null,
        ipPools: this.cityTelecomApprovalFormDatas.ipPools,
        applyAmount: this.cityTelecomApprovalFormDatas.applyAmount,
        APNNames: "",
        APNTepes: "",
        CityTelecomApprovalAssignedIP: "",
        purchaseType: "0",
        purchasingPersonnel: "",
        CityTelecomApprovalResult: 1,
        cityTeleCommonComments: "",
        CityTelecomApprovalComment: "",
        ipPoolDisplay: "",
      };
      this.isAgree = false;
      this.$refs.cityTelecomApprovalForm.clearValidate();
    },
    submitForm() {
      if (this.cityTelecomApprovalFormDatas.CityTelecomApprovalResult == 1) {
        this.$refs.cityTelecomApprovalForm.validate((valid) => {
          if (!valid) return false;
          // 触发sumit事件
          const params = {
            formType: "CityTelecomApprovalForm",
            formData: this.cityTelecomApprovalFormDatas,
          };
          this.$emit("submit", params);
          return true;
        });
      } else {
        this.$refs.cityTelecomApprovalForm.validateField(
          "CityTelecomApprovalComment",
          (valid) => {
            if (valid == "审批意见不能为空") return false;
            const params = {
              formType: "CityTelecomApprovalForm",
              formData: this.cityTelecomApprovalFormDatas,
              noAgree: 1,
            };
            this.$emit("submit", params);
            return true;
          }
        );
      }
    },
    cityTeleCommonCommentsSelected(e) {
      this.cityTelecomApprovalFormDatas.cityTeleCommonComments =
        e.target.innerText;
      if (
        this.cityTelecomApprovalFormDatas.CityTelecomApprovalComment.length == 0
      ) {
        this.cityTelecomApprovalFormDatas.CityTelecomApprovalComment =
          e.target.innerText;
      } else {
        this.cityTelecomApprovalFormDatas.CityTelecomApprovalComment =
          this.cityTelecomApprovalFormDatas.CityTelecomApprovalComment +
          "\n" +
          e.target.innerText;
      }
    },
    assignIP() {
      //todo
      if (this.cityTelecomApprovalFormDatas.ipPoolDisplay) {
        this.cityTelecomApprovalFormDatas.CityTelecomApprovalAssignedIP = "";
        assignIP(
          this.currentIpPoolId,
          this.cityTelecomApprovalFormDatas.applyAmount
        ).then((response) => {
          this.ipAddressListKey = response.data.ipAddressListKey
          this.$emit('ipAddressListKey',this.ipAddressListKey)
          this.cityTelecomApprovalFormDatas.CityTelecomApprovalAssignedIP =
            response.data.ipAddressListStr;
          this.cityTelecomApprovalFormDatas.currentIpPoolId =
            this.currentIpPoolId;
          this.isIpPreAssigned = true;
        });
      } else {
        this.$message.error("请先选择IP池");
      }
    },
    // setIpPolls(value){
    //   console.log("setIpPolls");
    //   console.log(value);
    //   this.ipPools = value;
    // },
    ipPoolSelected(value) {
      this.currentIpPoolId = value;
      this.cityTelecomApprovalFormDatas.currentIpPoolId=value;
      for (
        let i = 0;
        i < this.cityTelecomApprovalFormDatas.ipPools.length;
        i++
      ) {
        if (this.cityTelecomApprovalFormDatas.ipPools[i].id === value) {
          this.cityTelecomApprovalFormDatas.APNNames =
            this.cityTelecomApprovalFormDatas.ipPools[i].apnName;
          this.cityTelecomApprovalFormDatas.APNTypes =
            this.cityTelecomApprovalFormDatas.ipPools[i].apnTypeName;
          this.cityTelecomApprovalFormDatas.ipPool =
            this.cityTelecomApprovalFormDatas.ipPools[i].ipPool;
          this.cityTelecomApprovalFormDatas.CityTelecomApprovalAssignedIP = "";
          if(this.cityTelecomApprovalFormDatas.ipPools[i].apnType=="2"){
            this.isStaticApn=false;
          }else{
            this.isStaticApn=true;
          }
          break;
        }
      }
    },
    cityTelecomPurchaseTypeSelected(value) {
      //此处写死，需要以后修改
      //todo
      getPurchasingPersonnelList(15, value).then((res) => {
        this.purchasingPersonnelList = res.data;
      });

      this.cityTelecomApprovalFormDatas.purchasingPersonnel = "";
    },
    /** 地市通信审批结果变化 */
    cityTelecomApprovalResultSet() {
      if (this.cityTelecomApprovalFormDatas.CityTelecomApprovalResult == 1) {
        //this.cityTelecomApprovalRules = this.rules;
        this.isAgree = false;
      } else {
        this.isAgree = true;
        //this.cityTelecomApprovalRules = [];
        //this.$refs["cityTelecomApprovalForm"].resetFields();
        this.cityTelecomApprovalFormDatas.CityTelecomApprovalResult = 2;
      }
    },
  },
};
</script>
